<template>
<wxc-mask  
    height="1000"
    width="665"     
    duration="200"
    :top="40"
    mask-bg-color="rgba(255,255,255,0)"
    :has-animation="hasAnimation"
    :has-overlay="true"
    :show="show"
    
    @wxcMaskSetHidden="wxcMaskSetHidden"
    @wxcOverlayBodyClicked="wxcOverlayBodyClicked"
    > 
    <image class="couponBg" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/redPackCoupon.png"></image>
    <!-- <div class="bgc-box">
        <div class="center-ring"></div>
    </div>
    <image class="grain-top" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/4%E5%BC%A0%E4%BC%98%E6%83%A0%E5%88%B8%E5%B7%A6%E4%B8%8A%E7%BA%B9%E7%90%86%402.png"></image>
    <image class="top-image" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E7%BA%B9%E7%90%86%402x.png"></image>
    <image class="title-text" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E9%A2%86%E5%8F%96%E6%88%90%E5%8A%9F%EF%BC%8C%E5%BC%80%E5%90%AF%E6%82%A8%E7%9A%84%E6%A2%A6%E6%83%B3%E4%B9%8B%E6%97%85%402x.png"></image>  
    <image class="bg-grain" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E5%A4%A7%E7%BA%A2%E5%8C%85%E5%BD%A9%E5%B8%A6%E5%92%8C%E9%87%91%E5%B8%81%403x.png"></image>
    <image class="grain-bottom" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E8%9E%BA%E6%97%8B%E7%BA%B9%E7%90%862%402x.png"></image> -->
    <div class="packList"  @click="goCouponList">
        <!-- <div class="packInfo">
            <text class="packInfoText">大乐透彩票一注</text>
            <button class="packBtn">
                <text class="text-style">使用</text>
            </button>
        </div> -->
        <div class="packInfo">
            <div class="num-pack">
                <text class="price-logo">￥</text>
                <text class="price">2</text>
            </div>
            <div class="packInfoTexts">
                <text class="price-sub">无门槛优惠券</text>
                <text class="text-count">大乐透可用</text>
                <text class="text-count">发放7日内有效</text>
            </div>
            <div class="packBtn" >
                <text class="text-style">查看</text>
            </div>
        </div>
        <div class="packInfo">
            <div class="num-pack">
                <text class="price-logo">￥</text>
                <text class="price">3</text>
            </div>
            <div class="packInfoTexts">
                <text class="price-sub">满减优惠券</text>
                <text class="text-count">满30元使用</text>
                <text class="text-count">发放7日内有效</text>
            </div>
            <div class="packBtn">
                <text class="text-style">查看</text>
            </div>
        </div>
        <div class="packInfo">
            <div class="num-pack">
                <text class="price-logo">￥</text>
                <text class="price">5</text>
            </div>
            <div class="packInfoTexts">
                <text class="price-sub">满减优惠券</text>
                <text class="text-count">满50元使用</text>
                <text class="text-count">发放7日内有效</text>
            </div>
            <div class="packBtn">
                <text class="text-style">查看</text>
            </div>
        </div>
          <div class="packInfo">
            <div class="num-pack">
                <text class="price-logo">￥</text>
                <text class="price">10</text>
            </div>
            <div class="packInfoTexts">
                <text class="price-sub">满减优惠券</text>
                <text class="text-count">满200元使用</text>
                <text class="text-count">发放7日内有效</text>
            </div>
            <div class="packBtn">
                <text class="text-style">查看</text>
            </div>
        </div>
        <div class="foot-text">
                <text class="foot-font"> 请到我的-</text>
                <a href="javascript:;">
                    <text style="color:rgba(255, 245, 0, 1);font-size:20px"> 投注记录</text>
                </a>
                <text style="font-size:20px;color:rgba(227, 227, 227, 1)"> 和</text>
                <a style="color:rgba(255, 245, 0, 1)" href="javascript:;">
                    <text style="color:rgba(255, 245, 0, 1);font-size:20px"> 优惠券</text>
                </a>
                <text style="font-size:20px;color:rgba(227, 227, 227, 1)">查看</text>
        </div>
    </div>
</wxc-mask>   
</template>
<script>
    import { WxcMask, WxcButton} from 'weex-ui';
      let navigator = weex.requireModule("navigator");
          import { getBaseUrl } from "@/utils/index.js";

	export default {
		components: { WxcMask,WxcButton },
		data: () => ({
			show: true,
			overlayCanClose: true,
			isFalse: false,
			hasAnimation: true,
        }),
          created(){
          	this.baseURL = getBaseUrl(weex.config.bundleUrl, true);

        },
		methods: {
			openMask (e) {
				this.show = true;
				this.hasAnimation = true;
			},
			wxcMaskSetHidden () {
				this.show = false;
            },
            wxcOverlayBodyClicked(){
                this.show = false;
            },
            goCouponList(){
                navigator.push({
                      'url': this.baseURL + 'views/couponlist/couponlist.js',
                      'animated': 'true'
                    })
		
            }
		}
	};
</script>
<style scoped>
.couponBg{
    position:absolute;
    width:599px;
    height:985px;
    left:5px;
    top:30px;
}
.bg-box {
    /* width: 665px;
    height: 1136px; */
}
.bgc-box{ 
    width:547px;
    height:908px;
    position: absolute;
    top: 85px;
    left: 51px;
    background-image:linear-gradient(to bottom,#F87D3C,#CC1229);
    border-top-left-radius: 908px 547px;
    border-top-right-radius: 908px 547px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.center-ring{
    width:365px;
    height:373px;
    position: absolute;
    top: 93px;
    left: 96px;
    border-top-left-radius: 185px;
    border-top-right-radius: 185px;
    border-bottom-right-radius: 185px;
    border-bottom-left-radius: 185px;
    background-color: pink;
    background-color:#E74A16;
    opacity:0.4324;
}
.grain-top{
    width: 399px;
    height: 371px;
    position: absolute;
    top: 112px;
    left: 54px;
}
.top-image {
    width: 470px;
    height: 358px;
    position: absolute;
    left: 120px;
}
.bg-grain {
  width: 595px;
  height: 876px;
  position: absolute;
  top: 97px;
}
.title-text {
    width: 391px;
    height: 164px;
    position: absolute;
    top: 166px;
    left: 147px;
}
.grain-bottom {
    width: 191px;
    height: 194px;
    position: absolute;
    top: 799px;
    left: 402px;
}
 .packList {
    position: absolute;
    top: 338px;
    left: 95px;
 }
 .packInfo {
    width: 469px;
    height: 126px;
    background-color: #fff;
    margin-top: 25px;
    flex-direction: row;
    align-items: center;
    position: relative;
    border-top-left-radius:8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius:  8px;
 }
 .packInfoText {
    margin-left: 60px;
    width:260px;
    height:50px;
    font-size:36px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:#E70D0D;
    line-height:50px;
 }
 .num-pack {
    width:164px;
    height:126px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    border-right-style: dashed;
    border-right-width: 1px;
    border-right-color: #D5D5D5;
 }

 .packInfoTexts {
     width:180px;
    margin-left: 24px;
 }
 .packBtn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 48px;
    background-color:#E70D0D;
    border-radius:32px;
    /* position: absolute;
    right: 16px; */
 }

 .foot-text{
    margin-top: 16px;
    flex-direction: row;
    justify-content: center;
 }

.text-style {
    font-size:24px;
    text-align:center;
    color:#ffffff;
}

.price {
    font-size:60px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:#E70D0D;
    line-height:84px;
}

.price-sub {
    font-size:20px;
    line-height:28px;
    font-weight:500;
    color:#333333;
    font-family:PingFangSC-Medium;
}

.price-logo{
    font-size:40px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:#E70D0D;
    line-height:56px;
}

.text-count{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#999999;
    line-height:22px;
}

.foot-font{
  font-size:20px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:#FFFFFF;
  line-height:28px;
}
</style>

